<template>
  <div class="body">
    <div class="menu">
      <el-input-number v-model="cropperBack.scale.x" :min="1" :max="10000" label="宽度"></el-input-number>
      <el-input-number v-model="cropperBack.scale.y" :min="1" :max="10000" label="高度"></el-input-number>
      <el-slider show-stops :step="10" v-model="rotate" :min="-90" :max="90" style="width: 300px;"></el-slider>
<!--      <div id="rotate" :style="{transform: `rotate(${rotate}deg)`}"></div>-->
    </div>
    <div class="main" ref="editorPan">
      <div id="edit" class="content" :style="getStyle">
<!--        <frame-cropper ref="frameCropper" :type="true" :style="{left: 0, top: 0}" :img-rotate="rotate" :rotate-scale="rotateScale" :parentId="cropperBack.parentId" :max-canvas-info="cropperBack.maxCanvasInfo" :imgUrl="cropperBack.imgUrl" :cropper-info="cropperBack.style" :img-info="cropperBack.imgInfo" @handleCropper="handleCropperBack"/>-->
        <frame-cropper-t
          ref="frameCropper"
          :type="false"
          :style="{left: 0, top: 0}"
          :img-rotate="rotate"
          :rotate-scale="rotateScale"
          :parentId="cropperBack.parentId"
          :max-canvas-info="cropperBack.maxCanvasInfo"
          :imgUrl="cropperBack.imgUrl"
          :cropper-info="cropperBack.style"
          :img-info="cropperBack.imgInfo"
          @handleCropper="handleCropperBack"/>
      </div>
    </div>
  </div>
</template>

<script>
import FrameCropper from '@/components/frameCropper'
import FrameCropperT from '@/components/frameCropperT'
export default {
  name: 'ImgCropper',
  components: {
    FrameCropper,
    FrameCropperT
  },
  data() {
    return {
      showCropper: false,
      scale: 1,
      rotate: 0,
      rotateScale: 1,
      canvasInfo: {
        width: 1000,
        height: 1000
      },
      cropperBack: {
        state: true,
        parentId: 'edit',
        imgUrl: 'https://shejimiao-biku.oss-cn-qingdao.aliyuncs.com/web/1.jpg', // 4000 * 2669
        // imgUrl: 'https://st0.dancf.com/02/gaodingx/0/cms/design/202104251017-7404.jpg', // 1333 * 2000
        style: {
          left: 0,
          top: 0,
          width: 1242,
          height: 2208,
          rotate: 0
        },
        imgInfo: {
          left: 0,
          top: 0,
          width: 4000,
          height: 2669,
          scaleX: 1,
          scaleY: 1,
          rotate: 0
        },
        maxCanvasInfo: {
          width: 1000,
          height: 1000
        },
        scale: {
          x: 1000,
          y: 2000
        }
      }
    }
  },
  computed: {
    getStyle() {
      return {
        // width: this.canvasInfo.width * this.scale + 'px',
        // height: this.canvasInfo.height * this.scale + 'px'
        width: '1000px',
        height: '1000px',
        overflow: 'hidden'
      }
    }
  },
  watch: {
    'cropperBack.scale': {
      handler() {
        this.setInfo()
      },
      deep: true
    },
    rotate(rotate) {
      console.log('width: ', this.cropperBack.imgInfo.width, 'height: ', this.cropperBack.imgInfo.height, 'boxWIdth： ', this.cropperBack.style.width, 'boxZH', this.cropperBack.style.height)
      // this.getHypotenuse({ width: this.cropperBack.imgInfo.width, height: this.cropperBack.imgInfo.height, boxWidth: this.cropperBack.style.width, boxHeight: this.cropperBack.style.height, rotate })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setScale()
      this.setInfo()
    })
  },
  methods: {
    getHypotenuse({ width, height, boxWidth, boxHeight, rotate }) {
      // const hypotenuse = Math.sqrt(width * width + height * height)
      // const halfWidth = width / 2
      // const halfHeight = height / 2
      const hypotenuse = Math.sqrt(boxWidth * boxWidth + boxHeight * boxHeight)
      const halfWidth = boxWidth / 2
      const halfHeight = boxHeight / 2
      const deg = Math.atan(halfWidth / halfHeight) / Math.PI * 180
      // const newWidth = Math.sin((deg + Math.abs(rotate)) / 180 * Math.PI) * hypotenuse
      const newWidth = Math.sin((deg + Math.abs(rotate)) / 180 * Math.PI) * hypotenuse
      const newHeight = Math.sin((90 - deg + Math.abs(rotate)) / 180 * Math.PI) * hypotenuse
      let scaleX = newWidth / width
      let scaleY = newHeight / boxHeight
      if (boxWidth >= boxHeight) {
        scaleX = newWidth / boxWidth
        scaleY = newHeight / height
      }
      const boxScale = boxWidth / boxHeight
      const imgScale = width / height
      console.log(scaleX, scaleY, newWidth, newHeight)
      this.rotateScale = scaleX >= scaleY ? scaleX : scaleY
      // this.rotateScale = boxScale >= imgScale ? scaleX : scaleY
      // this.rotateScale = scaleY
      // this.rotateScale = scaleX
    },
    getCenter(point, center, rotate) {
      const deg = Math.PI / 180 * rotate
      const newX = center.x + (point.x - center.x) * Math.cos(deg) - (point.y - center.y) * Math.sin(deg)
      const newY = center.y + (point.x - center.x) * Math.sin(deg) + (point.y - center.y) * Math.cos(deg)
      return {
        x: newX,
        y: newY
      }
    },
    setScale() {
      this.scale = this.getScaleVal()
    },
    getScaleVal() {
      let scale = 1
      if (this.$refs.editorPan) {
        const {
          width,
          height
        } = this.$refs.editorPan.getBoundingClientRect()
        // 90 代表上下margin/padding 的总大小
        if (width / height <= this.canvasInfo.width / this.canvasInfo.height) {
          scale = width / this.canvasInfo.width
        } else {
          scale = height / this.canvasInfo.height
        }
        scale = scale < 1 ? (scale > 0.1 ? scale : 0.1) : 1
        return scale
      }
      return scale
    },
    setInfo() {
      this.readyImgStyle(this.cropperBack.imgUrl).then(({ width, height }) => {
        const imgScale = width / height
        const newData = this.cropperBack.maxCanvasInfo
        const canvasScale = newData.width / newData.height
        let scale = newData.width / width
        if (imgScale < canvasScale) {
          scale = newData.height / height
        }
        const newScale = this.scale
        const scaleX = 1
        const scaleY = 1

        const { x, y } = this.cropperBack.scale
        const wLargeH = width / x >= height / y
        if (wLargeH) {
          this.cropperBack.style.width = Math.round(height / y * x)
          this.cropperBack.style.height = Math.round(height)
        } else {
          this.cropperBack.style.width = Math.round(width)
          this.cropperBack.style.height = Math.round(width / x * y)
        }
        console.log(this.cropperBack.style.width, this.cropperBack.style.height, scale, this.scale)
       /**/
        this.cropperBack.style.width *= this.scale * scale
        this.cropperBack.style.height *= this.scale * scale
        const k1 = this.cropperBack.style.width / this.cropperBack.style.height
        const k2 = width / height
        let w
        let h
        if (k1 < k2) {
          h = this.cropperBack.maxCanvasInfo.height
          w = h * k1
        } else {
          w = this.cropperBack.maxCanvasInfo.width
          h = w / k1
        }
        this.cropperBack.style.width = w
        this.cropperBack.style.height = h
        this.cropperBack.style.left = (this.cropperBack.maxCanvasInfo.width - this.cropperBack.style.width) / 2
        this.cropperBack.style.top = (this.cropperBack.maxCanvasInfo.height - this.cropperBack.style.height) / 2

        this.cropperBack.imgInfo.width = width * scale * scaleX * newScale
        this.cropperBack.imgInfo.height = height * scale * scaleY * newScale
        this.cropperBack.imgInfo.left = ((this.cropperBack.style.width - width * scale * scaleX) / 2) * newScale
        this.cropperBack.imgInfo.top = ((this.cropperBack.style.height - height * scale * scaleY) / 2) * newScale

        this.showCropper = true

        this.$refs.frameCropper.setImgData()
      })
    },
    readyImgStyle(imageSrc) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = imageSrc
        img.onload = function() {
          resolve({ width: img.width, height: img.height })
        }
        img.onerror = () => {
          reject('err')
        }
      })
    },
    handleCropperBack(data) {
      // console.log(data, '66666666666')
    }
  }
}
</script>

<style lang="scss" scoped>

.body {
  width: 100%;
  height: 100%;
 /* display: flex;
  justify-content: center;
  align-items: center;*/
  overflow: hidden;
  //background: #409eff;
  //padding: 100px;

  #rotate {
    background: #1f2d3d;width: 200px;height: 100px;
  }
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #409eff;

  .content {
    position: relative;
  }
}
</style>
